<template>
  <div style="min-height: calc(100vh - 340px)">
    <a-form
      :model="formState"
      name="horizontal_login"
      layout="inline"
      autocomplete="off"
    >
      <a-form-item>
        <a-input
          v-model:value="formState.orderid"
          placeholder="订单号"
          style="width: 220px"
          allowClear
        >
        </a-input>
      </a-form-item>

      <a-form-item>
        <a-select
          v-model:value="formState.pay_style"
          placeholder="支付方式"
          style="width: 220px"
          allowClear
        >
          <a-select-option
            v-for="item in Object.entries(payJson)"
            :key="item[0]"
            :value="item[0]"
            >{{ item[1] }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item>
        <a-range-picker v-model:value="formState.time" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="getData" :icon="h(SearchOutlined)"
          >查询</a-button
        >
      </a-form-item>
    </a-form>
    <a-table
      class="ant-table-striped mt-[20px]"
      size="middle"
      :columns="columns"
      :data-source="dataSource"
      :pagination="false"
      :row-class-name="
        (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
      "
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex == 'unit'">
          <span>{{
            record.unit == "y" ? "年" : record.unit == "m" ? "月" : "日"
          }}</span>
        </template>
        <template v-if="column.dataIndex == 'pay_style'">
          <span>{{ payJson?.[record?.pay_style] || "--" }}</span>
        </template>
        <template v-if="column.dataIndex == 'createtime'">
          <span>{{ getDate(record?.createtime) }}</span>
        </template>

        <template v-if="column.dataIndex == 'level_id'">
          <span>{{ getLevelName(record?.level_id) }}</span>
        </template>
      </template>
    </a-table>
    <a-pagination
      class="mt-[20px]"
      v-model:current="page.current"
      show-quick-jumper
      :total="page.total"
      @change="onChange"
      :show-total="(total) => `共 ${page.total} 条`"
    />
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from "vue";
import { member_buy_list, levelscomplete, getDate } from "../../../../Api/work";
import { h } from "vue";
import { SearchOutlined } from "@ant-design/icons-vue";
import dayjs from "dayjs";
const page = reactive({
  current: 1,
  total: 0,
  size: 10,
});

const formState = ref({
  orderid: "",
  pay_style: undefined,
  time: "",
});

const payJson = {
  vx: "微信",
  zfb: "支付宝",
  dg: "对公转账",
  qt: "其他",
};

const columns = [
  { title: "订单号", dataIndex: "orderid" },
  { title: "数量", dataIndex: "num" },
  { title: "单位", dataIndex: "unit" }, //y=年,m=月,d=日
  { title: "支付方式", dataIndex: "pay_style" },
  { title: "付款金额", dataIndex: "pay_price" },
  { title: "优惠金额", dataIndex: "preferential_price" },
  { title: "创建时间", dataIndex: "createtime" },
  { title: "会员等级", dataIndex: "level_id" },
];
const dataSource = ref([]);
const getData = async () => {
  console.log("formState.value", formState.value);
  const params = {
    ...formState.value,
    page: page.current,
    limit: page.size,
  };
  if (params.time?.[0]) {
    // params.start_time = params.time?.[0].unix();
    // params.end_time = params.time?.[1].unix();
    params.start_time = dayjs(params.time?.[0].format('YYYY-MM-DD 00:00:00')).unix();
    params.end_time = dayjs(params.time?.[1].format('YYYY-MM-DD 23:59:59')).unix();
    delete params.time
  }

  const res = await member_buy_list(params);
  dataSource.value = res.data?.data?.list;

  page.total = res.data?.data?.count;
};
const onChange = (p) => {
  page.current = p;
  getData();
};

getData();
const levels = ref([]);
onMounted(async () => {
  const res = await levelscomplete();
  levels.value = res.data.data;
});

const getLevelName = (id) => {
  return levels.value.find((p) => p.id == id)?.name;
};
</script>

<style lang="scss" scoped>
.ant-table-striped :deep(.table-striped) td {
  background-color: #edf0f6;
}

:deep(
    :where(.css-dev-only-do-not-override-omspr6).ant-table-wrapper
      .ant-table-thead
      > tr
      > th
  ) {
  background: #ecf4ff !important;
}
</style>
